<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { ElButton } from 'element-plus'

export default defineComponent({
  components: {
    ElButton
  },
  setup() {
    const pages = reactive([
      {
        id: '01',
        label: '图片上传（至oss）',
        path: 'picUpload/index.html'
      }
    ])
    const openNewTab = (path) => {
      chrome.tabs.create({ url: chrome.runtime.getURL(path) })
    }
    return {
      pages,
      openNewTab
    }
  }
})
</script>

<template>
  <div class="title">
    <h2>众玩小工具</h2>
    <h6>（仅支持公司内网使用）</h6>
  </div>
  <div class="pages">
    <el-button
      v-for="item in pages"
      :key="item.id"
      type="primary"
      @click="openNewTab(item.path)"
      >{{ item.label }}</el-button
    >
  </div>
</template>

<style scoped lang="scss">
.title {
  color: #666;
  line-height: 1;
  h2,
  h6 {
    margin: 8px 0;
  }
  h6 {
    font-weight: 300;
  }
}
.pages {
  border-radius: 8px;
  border: 1px dashed #ccc;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 12px;
  .el-button {
    width: 100%;
    margin-left: 0 !important;
  }
}
</style>
